<template>
	<view class="goodsList">
		<search></search>
		<view class="goodsList_item" >
			<view class="item" v-for="(item,index) in goodsList" :key='item.goods_id' :data-id="item.goods_id" @click="goToGoodsDetails($event,item.goods_id)">
				<view class="img"><image :src="item.goods_small_logo" mode="widthFix"></image></view>
				<view class="name">{{item.goods_name}}</view>
				<view class="number">库存：{{item.goods_number}}</view>
				<view class="price">${{item.goods_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search/index.vue'
	export default {
		data() {
			return {
				pagenum: 1,
				pagesize: 10,
				goodsList:[],
				id: ''
			}
		},
		components:{
			search
		},
		onLoad(option) {
			this.id = option.id;
			this.getGoodsList(option.id)
		},
		onReachBottom(){
			this.pagenum ++
			this.getGoodsList(this.id)
		},
		methods:{
			async getGoodsList(id){
				let params = {
					//  #ifdef MP-WEIXIN
					cid :id,
					// #endif
					//  #ifdef H5
					cid :this.$route.query.id,
					// #endif
					pagenum: this.pagenum,
					pagesize: this.pagesize
				}
				let res = await this.$store.dispatch('getGoodsList',params)
				this.goodsList = [...this.goodsList, ...res.data.message.goods];
			},
			goToGoodsDetails(e,id){
				//  #ifdef MP-WEIXIN
				uni.navigateTo({
					url:`../goodsDetails/goodsDetails?id=${e.currentTarget.dataset.id}`
				})
				// #endif
				//  #ifdef H5
				uni.navigateTo({
					url:`../goodsDetails/goodsDetails?id=${id}`
				})
				// #endif
			}
		}
	}
</script>

<style scoped>
	.goodsList_item{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.goodsList_item .item{
		width: 50%;
		padding: 30rpx 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.goodsList_item .item .img{
		width: 100%;
		height: 400rpx;
		overflow: hidden;
	}
	.goodsList_item .item image{
		width: 100%;
		height: 100%;
	}
	.goodsList_item .item .name{
		 text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
	.goodsList_item .item .number{
		margin: 10rpx 0;
		font-size: 30rpx;
	}
	.goodsList_item .item .price{
		color: red;
		font-size: 50rpx;
	}
</style>
